<template>
  <div class="box">
    <div class="item">
      <common-item1
        :query="query"
        :streetList="streetList"
        :communityList="communityList"
        :villageList="villageList"
        :show="false"
        @visibleChangeStreet="visibleChangeStreet"
        @changeStreet="changeStreet"
        @visibleChangeCommunity="visibleChangeCommunity"
        @changeCommunity="changeCommunity"
        @visibleChangeVillage="visibleChangeVillage"
        @changeVillage="changeVillage"
      />
      <el-button type="primary" class="handle-input mb10" @click="handleSearch1"
        >查询</el-button
      >
      <el-button type="primary" class="handle-input mb10" @click="handleExport1"
        >导出邦凝缺失</el-button
      >
      <el-button type="primary" class="handle-input mb10" @click="handleSearch2"
        >查询</el-button
      >
      <el-button type="primary" class="handle-input mb10" @click="handleExport2"
        >导出城管缺失</el-button
      >

      <a href="javascript:void(0)" class="btn">
        导入城管数据
        <input type="file" id="file" @change="uploadFile" />
      </a>

      <el-button
        type="danger"
        style="margin-left:10px"
        class="handle-input mb10"
        @click="deleteVillage"
        >删除</el-button
      >
      <span style="margin-left: 10px;">{{ fileName }}</span>
    </div>
    <div class="item">
      <el-button type="primary" class="handle-input mb10" @click="handleSearch3"
        >查询城管小区户数</el-button
      >
      <span style="margin-left: 10px;"
        >{{ urbanmanage.count }} {{ urbanmanage.villageName }}</span
      >
    </div>
    <div class="item">
      <el-button type="primary" class="handle-input mb10" @click="handleSearch4"
        >查询邦凝小区户数</el-button
      >
      <span style="margin-left: 10px;"
        >{{ sander.count }} {{ sander.villageName }}</span
      >
    </div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</template>
<script>
import { commonItem1 } from "../../common/commonItem1/common-item1.js";
import NProgress from "nprogress";
export default {
  data() {
    return {
      query: {
        streetId: "",
        communityId: "",
        villageId: "",
        streetName: "",
        communityName: "",
        villageName: ""
      },
      fileName: "",
      streetList: [],
      communityList: [],
      villageList: [],
      sander: {},
      urbanmanage: {}
    };
  },
  components: {
    "common-item1": () => import("../../common/commonItem1/common-item1.vue")
  },
  methods: {
    // 删除小区
    deleteVillage() {
      this.delete(this.query.villageId);
    },
    delete(villageId) {
      this.$axios
        .delete(`/village/citydistrict/deleteCityDistrict`, {
          params: { villageId }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$message.error(res.msg);
            return;
          }
          this.query.villageId = "";
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    uploadFile(e) {
      NProgress.start();
      var event = e || window.event;
      var target = event.target || e.srcElement;

      var input = document.querySelector("#file");
      var file = input.files[0];

      var formdata = new FormData();
      formdata.append("file", file);
      this.fileName = file.name;
      this.$axios
        .post("/village/citydistrict/importCityDistrict", formdata, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            // 解决input file上传文件中onChange事件只触发一次问题
            target.value = null;
            NProgress.done();
            return this.$message.error(res.msg);
          }
          this.$message.success(res.msg);
          target.value = null;
          NProgress.done();
        })
        .catch(err => {});
    },
    ...commonItem1,
    search(url) {
      NProgress.start();
      this.$axios
        .get(url, {
          params: {
            villageId: this.query.villageId
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            NProgress.done();
            return this.$message.error(res.msg);
          }
          this.fileName = res.msg;
          this.$message.success(res.msg);
          NProgress.done();
        })
        .catch(err => {});
    },
    // 查询1 邦凝缺失查询
    handleSearch1() {
      this.search("/village/citydistrict/getMoreCityDistrict");
    },
    // 查询2 城管缺失查询
    handleSearch2() {
      this.search("/village/citydistrict/getMoreHousehold");
    },
    // 查询城管小区户数
    handleSearch3() {
      // this.query("/village/citydistrict/count");
      NProgress.start();
      this.$axios
        .get("/village/citydistrict/count", {
          params: {
            villageId: this.query.villageId,
            villageName: this.query.villageName
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            NProgress.done();
            return this.$message.error(res.msg);
          }
          this.urbanmanage = res.data;
          NProgress.done();
        })
        .catch(err => {});
    },
    // 查询邦凝小区户数
    handleSearch4() {
      // this.search("/village/household/count");
      NProgress.start();
      this.$axios
        .get("/village/household/count", {
          params: {
            villageId: this.query.villageId,
            villageName: this.query.villageName
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            NProgress.done();
            return this.$message.error(res.msg);
          }
          this.sander = res.data;

          NProgress.done();
        })
        .catch(err => {});
    },
    // 导出邦凝缺失
    handleExport1() {
      NProgress.start();
      this.$axios
        .get("/village/citydistrict/exportMoreCitydistrict", {
          params: {
            villageId: this.query.villageId
          },
          responseType: "blob"
        })
        .then(res => {
          console.log(res);
          if (res.data.size === 0) {
            NProgress.done();
            return this.$message.warning({
              message: "数据为空",
              duration: 1500
            });
          }
          // 导出excel表格
          const link = document.createElement("a");
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          // let num = "";
          // for (let i = 0; i < 10; i++) {
          //   num += Math.ceil(Math.random() * 10);
          // }
          link.setAttribute(
            "download",
            this.query.communityName +
              "_" +
              this.query.villageName +
              "_邦凝缺失" +
              ".xls"
          );
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          NProgress.done();
        })
        .catch(error => {
          this.$Notice.error({ title: "错误", desc: "网络连接错误" });
        });
    },
    // 导出城管缺失
    handleExport2() {
      // this.search("/village/citydistrict/exportMoreHousehold");
      NProgress.start();
      this.$axios
        .get("/village/citydistrict/exportMoreHousehold", {
          params: {
            villageId: this.query.villageId
          },
          responseType: "blob"
        })
        .then(res => {
          if (res.data.size === 0) {
            NProgress.done();
            return this.$message.warning({
              message: "数据为空",
              duration: 1500
            });
          }
          // 导出excel表格
          const link = document.createElement("a");
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          // let num = "";
          // for (let i = 0; i < 10; i++) {
          //   num += Math.ceil(Math.random() * 10);
          // }
          link.setAttribute(
            "download",
            this.query.communityName +
              "_" +
              this.query.villageName +
              "_城管缺失" +
              ".xls"
          );
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          NProgress.done();
        })
        .catch(error => {
          this.$Notice.error({ title: "错误", desc: "网络连接错误" });
        });
    },
    // 导入城管理数据
    handleImport() {}
  }
};
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: auto;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.mb10 {
  margin-bottom: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.box {
  border: 1px solid #666;
  width: 100%;
  height: 100%;
  padding: 20px 20px 40px 20px;
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 100%;
  grid-template-rows: repeat(auto-fill, 60px);
  .item {
    border-bottom: 1px solid #666;
    line-height: 60px;
    white-space: nowrap;
  }
}
.btn {
  position: relative;
  display: inline-block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  width: 114px;
  height: 32px;
  line-height: 32px;
  background: #409eff;
  border-radius: 3px;
  font-size: 12px;
  vertical-align: middle;
  margin-left: 10px;
  input[type="file"] {
    opacity: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    position: absolute;
    left: 0;
  }
}
</style>
